
Page({

  /**
   * 页面的初始数据
   */
  data: {
    zh: '',
    schema:[],
    formData:{
      type: 'list',
      'associative-container': '',
      'reverse': false,
      'clip': true,
      'enable-back-to-top': false,
      'cache-extent': 0,
      'min-drag-distance': 18,
      'scroll-into-view-within-extent': false,
      'scroll-into-view-alignment': 'start',
      'scroll-x': false,
      'scroll-y': true,
      'upper-threshold': 50,
      'lower-threshold': 50,
      'scroll-top': 0,
      'scroll-left': 0,
      'scroll-into-view': '',
      'scroll-into-view-offset': 0,
      'scroll-with-animation': false,
      'enable-back-to-top': false,
      'enable-passive': false,
      'refresher-enabled': true,
      'refresher-threshold': 45,
      'refresher-default-style': 'none',
      'refresher-background': '',
      'refresher-triggered': false,
      'bounces': true,
      'show-scrollbar': true,
      'fast-deceleration': false,
      'padding': '[0, 0, 0, 0]',
      'refresher-two-level-enabled': false,
      'refresher-two-level-triggered': false,
      'refresher-two-level-threshold': 90,
      'refresher-two-level-close-threshold': 80,
      'refresher-two-level-scroll-enabled': false,
      'refresher-ballistic-refresh-enabled': false,
      'refresher-two-level-pinned': false,
    },
    title: '',
    result: '',
    remark: '',
    webUrl: '',
    apiName: '',
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3', 'demo-text-4'],
    renderer: 'skyline',
    triggered: false,
    twoLevelTriggered: false,
    isTwoLevel: false,
    refreshStatus: '下拉刷新',
    expCategorys: [],
    expSelected: 0
  },
  onUnload() {
  },
  onLoad(options) {
    console.log('options', options)
    wx.setNavigationBarTitle({
      title: options.title,
    })
    
    this.setData({
      title: options.title,
      zh:options.zh,
      remark: options.remark,
      webUrl: options.webUrl
    })
    this.setData({
      schema: [
        {
          label:'渲染模式',
          prop: 'type',
          type:'picker',
          labelOptions:['列表模式', '自定义模式', '嵌套模式'],
          valueOptions:['list', 'custom', 'nested'],
        },
        {
          label:'允许横向滚动',
          prop: 'scroll-x',
          type:'switch'
        },
        {
          label:'允许纵向滚动',
          prop: 'scroll-y',
          type:'switch'
        },
        {
          label:'距顶部/左边多远时，触发 scrolltoupper 事件',
          prop: 'upper-threshold',
          type:'number'
        },
        {
          label:'距底部/右边多远时，触发 scrolltolower 事件',
          prop: 'lower-threshold',
          type:'number'
        },
        {
          label:'设置竖向滚动条位置',
          prop: 'scroll-top',
          type:'number'
        },
        {
          label:'设置横向滚动条位置',
          prop: 'scroll-left',
          type:'number'
        },
        {
          label:'值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素',
          prop: 'scroll-into-view',
          type:'text'
        },
        {
          label:'跳转到 scroll-into-view 目标节点时的额外偏移。skyline 自 3.1.0 版本开始支持，webview 自 3.6.0 版本开始支持。',
          prop: 'scroll-into-view-offset',
          type:'number'
        },
        {
          label:'在设置滚动条位置时使用动画过渡',
          prop: 'scroll-with-animation',
          type:'switch'
        },
        {
          label:'iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启。鸿蒙 OS 暂不支持',
          prop: 'enable-back-to-top',
          type:'switch'
        },
        {
          label:'开启 passive 特性，能优化一定的滚动性能',
          prop: 'enable-passive',
          type:'switch'
        },
        {
          label:'开启自定义下拉刷新',
          prop: 'refresher-enabled',
          type:'switch'
        },
        {
          label:'设置自定义下拉刷新阈值',
          prop: 'refresher-threshold',
          type:'number'
        },
        {
          label:'设置自定义下拉刷新默认样式，支持设置 black | white | none， none 表示不使用默认样式',
          prop: 'refresher-default-style',
          type:'picker',
          labelOptions:['black', 'white', 'none'],
          valueOptions:['black', 'white', 'none'],
        },
        {
          label:'设置自定义下拉刷新区域背景颜色，默认为透明',
          prop: 'refresher-background',
          type:'text'
        },
        {
          label:'设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发',
          prop: 'refresher-triggered',
          type:'switch'
        },
        {
          label:'iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)',
          prop: 'bounces',
          type:'switch'
        },
        {
          label:'滚动条显隐控制 (同时开启 enhanced 属性后生效)',
          prop: 'show-scrollbar',
          type:'switch'
        },
        {
          label:'滑动减速速率控制, 仅在 iOS 下生效 (同时开启 enhanced 属性后生效)',
          prop: 'fast-deceleration',
          type:'switch'
        },
        {
          label:'启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。',
          prop: 'enable-flex',
          type:'switch'
        },
        {
          label:'启用 scroll-view 增强特性，启用后可通过 ScrollViewContext 操作 scroll-view。鸿蒙 OS 暂不支持 enhanced 及其相关的属性和方法。',
          prop: 'enhanced',
          type:'switch'
        },
        {
          label:'分页滑动效果 (同时开启 enhanced 属性后生效)',
          prop: 'paging-enabled',
          type:'switch'
        },
        {
          label:'使 scroll-view 下的 position sticky 特性生效，否则滚动一屏后 sticky 元素会被隐藏',
          prop: 'using-sticky',
          type:'switch'
        },
        {
          label:'关联的滚动容器',
          prop: 'associative-container',
          type:'picker',
          labelOptions:['空', '关联 draggable-sheet 组件', '关联 type=nested 嵌套模式', '	关联 页面手势返回'],
          valueOptions:['', 'draggable-sheet', 'nested-scroll-view', 'pop-gesture'],
        },
        {
          label:'是否反向滚动。一般初始滚动位置是在顶部，反向滚动则是在底部。',
          prop: 'reverse',
          type:'switch',
        },
        {
          label:'是否对溢出进行裁剪，默认开启。',
          prop: 'clip',
          type:'switch',
        },
        {
          label:'仅 iOS 支持，其余同 WebView 同名组件',
          prop: 'enable-back-to-top',
          type:'switch',
        },
        {
          label:'指定视口外渲染区域的距离，默认情况下视口外节点不渲染。指定 cache-extent 可优化滚动体验和加载速度，但会提高内存占用且影响首屏速度，可按需启用。',
          prop: 'cache-extent',
          type:'number',
        },
        {
          label:'指定 scroll-view 触发滚动的最小拖动距离。仅在 scroll-view 和其他组件存在手势冲突时使用，可通过调整该属性使得滚动更加灵敏。',
          prop: 'min-drag-distance',
          type:'number',
        },
        {
          label:'只 scroll-into-view 到 cacheExtent 以内的目标节点，性能更佳',
          prop: 'scroll-into-view-within-extent',
          type:'switch',
        },
        {
          label:'指定 scroll-into-view 目标节点在视口内的位置',
          prop: 'scroll-into-view-alignment',
          type:'picker',
          labelOptions:['目标节点显示在视口开始处', '目标节点显示在视口中间', '目标节点显示在视口结束处', '目标节点在就近的视口边缘显示，若节点已在视口内则不触发滚动'],
          valueOptions:['start', 'center', 'end', 'nearest'],
        },
        {
          label:'长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距',
          prop: 'padding',
          type:'picker',
          labelOptions: ['[0, 0, 0, 0]', '[10, 10, 10, 10]'],
          valueOptions: ['[0, 0, 0, 0]', '[10, 10, 10, 10]'],
        },
        {
          label:'开启下拉二级能力',
          prop: 'refresher-two-level-enabled',
          type:'switch',
        },
        {
          label:'设置打开/关闭二级',
          prop: 'refresher-two-level-triggered',
          type:'switch',
        },
        {
          label:'下拉二级阈值',
          prop: 'refresher-two-level-threshold',
          type:'number',
        },
        {
          label:'滑动返回时关闭二级的阈值',
          prop: 'refresher-two-level-close-threshold',
          type:'number',
        },
        {
          label:'处于二级状态时是否可滑动',
          prop: 'refresher-two-level-scroll-enabled',
          type:'switch',
        },
        {
          label:'惯性滚动是否触发下拉刷新',
          prop: 'refresher-ballistic-refresh-enabled',
          type:'switch',
        },
        {
          label:'即将打开二级时否定住',
          prop: 'refresher-two-level-pinned',
          type:'switch',
        },
      ]
    })
  },
  getFormData(e) {
    console.log('formdata==', e.detail.formData);
    this.setData({
      formData: e.detail.formData
    })
  },
  onPulling(e) {
    // console.log('onPulling:', e)
  },

  onRefresh() {
    console.info('@@@ onRefresh')
    if (this._freshing) return
    this._freshing = true
    setTimeout(() => {
      this.setData({
        triggered: false,
      })
      this._freshing = false
    }, 2000)
  },

  onRestore(e) {
    console.log('onRestore:', e)
  },

  onAbort(e) {
    console.log('onAbort', e)
  },

  closeTwoLevel() {
    // 设置 twoLevelTriggered: false 也可以关闭二楼
    // this.setData({
    //   twoLevelTriggered: false,
    // })
    this.setData({
      formData: {
        ...this.data.formData,
        'refresher-two-level-triggered': false
      }
    })
  },

  onStatusChange(e) {
    const status = e.detail.status
    console.log(status,'==status');
    const twoLevelModes = [6, 7, 8]
    const isTwoLevel = twoLevelModes.indexOf(status) >= 0
    const refreshStatus = this.buildText(status)
    this.setData({
      isTwoLevel,
      refreshStatus,
    })
  },
  buildText(status) {
    switch (status) {
      case 0:
        return '下拉刷新'
      case 1:
        return '松手刷新，下拉进入二楼'
      case 2:
        return '正在刷新'
      case 3:
        return '刷新成功'
      case 4:
        return '刷新失败'
      case 5:
        return '松手进入二楼'
      default:
        return ''
    }
  },
  handleScrollStart(evt) {
    'worklet'

  },

  handleScrollUpdate(evt) {
    'worklet'
    const maxDistance = 60
    const scrollTop = clamp(evt.detail.scrollTop, 0, maxDistance)
    const progress = EasingFn(scrollTop / maxDistance)
    this.searchBarWidth.value = lerp(100, 70, progress)
    this.navBarOpactiy.value = lerp(1, 0, progress)
  },

  handleScrollEnd(evt) {
    'worklet'
  },
  coverImage(e) {
  },
})